<template>
  <div class="cool-card">
    <el-row>
      <div class="search-section">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="应用名">
            <!--<el-input size="small" v-model="searchForm.appName" placeholder="审批人"></el-input>-->
            <el-select v-model="searchForm.app_name" size="small" filterable placeholder="请选择应用名称">
              <el-option
                v-for="item in appNames"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应用路径">
            <el-input size="small" v-model="searchForm.path" placeholder="输入应用前缀路径"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
              <el-button type="info" size="mini" @click="onClearSearchForm">刷新</el-button>
            </el-button-group>

          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" @click="addRouteDialogVisible = true">新增路由</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-row>
    <el-row>
      <el-card>
        <el-table v-loading="loadingTable"
                  :data="routes"
                  size="small"
                  ref="routesTable"
                  row-key="id"
                  class="actions-table">
          <el-table-column align="center" label="服务名" prop="serviceId"/>
          <el-table-column align="center" label="服务名" prop="path"/>
          <el-table-column align="center" label="省略前缀" prop="stripPrefix">
            <template slot-scope="scope">
              <div v-if="scope.row.stripPrefix">是</div>
              <div v-else>否</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="可重试" prop="retryable">
            <template slot-scope="scope">
              <div v-if="scope.row.retryable">是</div>
              <div v-else>否</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="enabled">
            <template slot-scope="scope">
              <template v-if="scope.row.enabled">
                <el-tag type="success" size="small">启用</el-tag>
              </template>
              <template v-else>
                <el-tag type="danger" size="small">停用</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="说明" prop="memo"/>

          <el-table-column align="center" label="操作" width="240">
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  size="mini"
                  @click="showUpdateDialog(scope.row)"
                >编辑
                </el-button>
                <el-button
                  v-if="scope.row.enabled == true"
                  size="mini"
                  type="danger"
                  @click="stopRoute(scope.row)"
                >暂停
                </el-button>
                <el-button
                  v-if="scope.row.enabled == false"
                  size="mini"
                  type="success"
                  @click="startRoute(scope.row)"
                >启用
                </el-button>

                <el-button
                  size="mini"
                  type="warning"
                  @click="onDelete(scope.row)"
                >删除
                </el-button>
              </el-button-group>

            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </el-row>
    <!--新增模态框-->
    <el-dialog :visible.sync="addRouteDialogVisible"
               title="新增路由" :width="$store.getters.inMobile == true ? '100%' : '50%'" class="dialog">
      <div class="dialog-body">
        <el-form ref="addRow" :model="addRouteModel" label-width="100px" label-position="left">
          <el-form-item label="服务ID:">
            <el-input v-model="addRouteModel.serviceId"></el-input>
          </el-form-item>
          <el-form-item label="匹配路径:">
            <el-input v-model="addRouteModel.path" placeHolder="eg:/user/**"></el-input>
          </el-form-item>
          <el-form-item label="省略前缀:">
            <el-switch
              v-model="addRouteModel.stripPrefix">
            </el-switch>
          </el-form-item>
          <el-form-item label="可重试:">
            <el-switch
              v-model="addRouteModel.retryable">
            </el-switch>
          </el-form-item>
          <el-form-item label="启用:">
            <el-switch
              v-model="addRouteModel.enabled">
            </el-switch>
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="addRouteModel.memo"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRouteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddRoute" :loading="onAddRouteLoading">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑dialog-->
    <el-dialog :visible.sync="updateRouteDialogVisible"
               title="编辑路由" :width="$store.getters.inMobile == true ? '100%' : '50%'" class="dialog">
      <div class="dialog-body">
        <el-form ref="addRow" :model="updateRouteModel" label-width="100px" label-position="left">
          <el-form-item label="服务ID:">
            <el-input v-model="updateRouteModel.serviceId"></el-input>
          </el-form-item>
          <el-form-item label="匹配路径:">
            <el-input v-model="updateRouteModel.path" placeHolder="eg:/user/**"></el-input>
          </el-form-item>
          <el-form-item label="省略前缀:">
            <el-switch
              v-model="updateRouteModel.stripPrefix">
            </el-switch>
          </el-form-item>
          <el-form-item label="可重试:">
            <el-switch
              v-model="updateRouteModel.retryable">
            </el-switch>
          </el-form-item>
          <el-form-item label="启用:">
            <el-switch
              v-model="updateRouteModel.enabled">
            </el-switch>
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="updateRouteModel.memo"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateRouteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onUpdateRoute" :loading="onUpdateRouteLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {addRoute, deleteRouteById, getAllRoutes, updateRoute} from "../../api/routes-api";
  import {getAppNames} from "../../api/action-api";

  export default {
    name: "Routes",
    data() {
      return {
        searchForm: {
          app_name: '',
          path: ''
        },
        appNames: [
          'god-soa',
          'gateway-soa'
        ],
        loadingTable: false,
        routes: [],
        addRouteDialogVisible: false,
        onAddRouteLoading: false,
        addRouteModel: {
          id: '',
          serviceId: '',
          path: '',
          stripPrefix: true,
          retryable: true,
          enabled: true,
          memo: ''
        },
        updateRouteDialogVisible: false,
        onUpdateRouteLoading: false,
        updateRouteModel: {},


      }
    },
    methods: {
      onDelete(row) {
        console.log(row)
        this.$confirm('确定要删除该路由吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          deleteRouteById(row.id).then(res =>{
            this.$message.success("操作成功")
            this.loadAllRoutes()
          })
        })
      },
      showUpdateDialog(row) {
        this.updateRouteModel = row
        this.updateRouteDialogVisible = true
      },
      onUpdateRoute() {
        this.onUpdateRouteLoading = true
        updateRoute(this.updateRouteModel).then(res => {
          this.updateRouteDialogVisible = false
          this.$message.success("更新成功")
          this.loadAllRoutes()
          this.onUpdateRouteLoading = false
          this.updateRouteDialogVisible = false
        }).catch(() => {
          this.onUpdateRouteLoading = false
        })
      },
      onAddRoute() {
        this.addRouteModel.id = this.addRouteModel.serviceId
        this.onAddRouteLoading = true
        addRoute(this.addRouteModel).then(res => {
          this.$message.success("添加成功")
          this.loadAllRoutes()
          this.onAddRouteLoading = false
          this.addRouteDialogVisible = false
        }).catch(() => {
          this.onAddRouteLoading = false
        })
      },
      startRoute(row) {
        //启动路由
        row.enabled = true
        updateRoute(row).then(res => {
          this.$message.success("启动成功")
          this.loadAllRoutes()
        })
      },
      stopRoute(row) {
        //暂停路由
        row.enabled = false
        updateRoute(row).then(res => {
          this.$message.success("暂停成功")
          this.loadAllRoutes()
        })
      },
      onClearSearchForm() {
        this.loadAllRoutes()
      },
      onSearch() {
        this.loadAllRoutes()
      },
      loadAllRoutes() {
        this.loadingTable = true
        getAllRoutes().then(res => {
          this.loadingTable = false
          this.routes = res
          console.log(res)
        }).catch(() => {
          this.loadingTable = false
        })
      },
      //获取应用名字
      loadAppNames() {
        getAppNames().then(res =>{
          this.appNames = res
          console.log(res)
        })
      }
    },
    created() {
      this.loadAllRoutes()
      this.loadAppNames()
    }
  }
</script>

<style scoped>
  .search-section >>> .el-form-item {
    margin-bottom: 8px;
  }
</style>
